<template>
    <section>
        <div class="drop nav-bar">
            <ul class="nav drop-header">
                <li class="dropdown-toggle caret category" @click="changeTab($event, 'category')"><span
                        class="nav-head-name">休闲娱乐</span></li>
                <li class="dropdown-toggle caret biz subway" @click="changeTab($event, 'biz')"><span
                        class="nav-head-name">全城</span></li>
                <li class="dropdown-toggle caret sort" @click="changeTab($event, 'sort')">
                    <span class="nav-head-name">默认排序</span></li>
                <li class="dropdown-toggle caret csp" @click="changeTab($event, 'csp')">
                    <span class="nav-head-name">筛选</span></li>
            </ul>
            <!--休闲娱乐-->
            <section class="shadow" v-if="clickTab === 'category'">
                <div class="dropdown-module category-list">
                    <div class="dropdown-left-module category-left-list">
                        <ul class="dropdown-list">
                            <li v-for="item in xiuxianList" :key="item.key" v-bind:class="{'active': item.active}"
                                @click="changexiuxianList(item)">
                                <span>{{ item.name }}</span><span
                                    class="quantity"><b>{{ item.amount }}</b></span></li>
                        </ul>
                    </div>
                    <div id="dropdown_sub_scroller"
                         class="dropdown-right-module category-right-list dropdown-sub-scroller">
                        <ul class="dropdown-list"
                            style="transition-property: -webkit-transform; transform-origin: 0px 0px; transform: translate3d(0px, 0px, 0px);">
                            <li v-for="item in xiuxianChildrenList" :key="item.key" @click="savexiuxian()">
                                <div><span class="sub-name">{{ item.name }}</span><span class="sub-quantity">{{ item.amount }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!--全城-->
            <section class="shadow biz" v-if="clickTab === 'biz'">
                <div class="sub-nav">
                    <ul class="tab">
                        <li class="active" data-subnav="biz" @click="changeBizTab($event, 'shangqu')">商区
                        </li>
                        <li data-subnav="subway" class="" @click="changeBizTab($event, 'ditie')">地铁站
                        </li>
                    </ul>
                </div>
                <!--商区-->
                <ul class="dropdown-list" v-show="bizTabTag === 'shangqu'">
                    <li v-for="item in shangquList" :key="item.key" v-bind:class="{'active': item.active}"
                        @click="changeshangquList(item)">
                        <span>{{ item.name }}</span><span class="quantity"><b>{{ item.amount }}</b></span></li>
                </ul>
                <ul class="dropdown-right-list" v-show="bizTabTag === 'shangqu'"
                    style="transition-property: -webkit-transform; transform-origin: 0px 0px; transform: translate3d(0px, 0px, 0px);"
                    @click="saveshangqu()">
                    <li v-for="item in shangquChildrenList" :key="item.key">
                        <div><span class="sub-name">{{ item.name }}</span><span
                                class="sub-quantity">{{ item.amount }}</span></div>
                    </li>
                </ul>
                <!--地铁-->
                <ul class="ditie-dropdown-list" v-show="bizTabTag === 'ditie'">
                    <li v-for="item in ditieList" :key="item.key" v-bind:class="{'active': item.active}"
                        @click="changeditieList(item)">
                        <span>{{ item.name }}</span><span class="quantity"><b>{{ item.amount }}</b></span></li>
                </ul>
                <ul class="ditie-dropdown-right-list" v-show="bizTabTag === 'ditie'"
                    style="transition-property: -webkit-transform; transform-origin: 0px 0px; transform: translate3d(0px, 0px, 0px);"
                    @click="saveditie()">
                    <li v-for="item in ditieChildrenList" :key="item.key">
                        <div><span class="sub-name">{{ item.name }}</span><span
                                class="sub-quantity">{{ item.amount }}</span></div>
                    </li>
                </ul>
            </section>
            <!--排序-->
            <section class="shadow sort" v-if="clickTab === 'sort'">
                <ul class="dropdown-list">
                    <li v-for="item in sortlist" :key="item.key" v-bind:class="{'active': item.active}"
                        @click="changeSortList(item)">
                        <span>{{ item.name }}</span><span class="quantity"></span></li>
                </ul>
            </section>
            <!--筛选-->
            <section class="shadow sort" v-if="clickTab === 'csp'">
                <div class="csp-wrapper">
                    <dl class="list">
                        <dd class="checkbox" data-key="deal_attr_23" data-key-on="107">
                            <label class="react">
                                <div class="kv-line-r"><h6>只看免预约</h6>
                                    <p><input style="pointer-events: none;" type="checkbox" class="mt" name="mt"></p>
                                </div>
                            </label></dd>
                        <dd class="checkbox" data-key="deal_attr_24" data-key-on="109"><label class="react">
                            <div class="kv-line-r"><h6>节假日可用</h6>
                                <p><input style="pointer-events: none;" type="checkbox" class="mt" name="mt"></p></div>
                        </label></dd>
                    </dl>
                    <div class="footer"><a class="btn btn-large btn-link btn-reset" href="javascript:void(0)"
                                           @click="reset">重置</a><a
                            class="pull-right btn-link btn-large btn btn-save" href="javascript:void(0)"
                            @click="saveSort()">保存</a></div>
                </div>
            </section>
        </div>
    </section>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "HomeDrop",
        data() {
            return {
                // 点击的tab
                clickTab: "",
                // 休闲娱乐 list
                xiuxianList: [
                    {
                        key: 1,
                        name: "球类运动",
                        amount: 0,
                        active: true,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 2,
                        name: "今日新单",
                        amount: 99,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 3,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 4,
                                name: "KTV",
                                amount: 100,
                            },
                            {
                                key: 5,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 6,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 7,
                                name: "KTV",
                                amount: 100,
                            },
                            {
                                key: 8,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 9,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 10,
                                name: "KTV",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 3,
                        name: "猫眼电影",
                        amount: 299,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 3,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 4,
                                name: "KTV",
                                amount: 100,
                            },
                            {
                                key: 5,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 6,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 7,
                                name: "KTV",
                                amount: 100,
                            },
                            {
                                key: 8,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 9,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 10,
                                name: "KTV",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 4,
                        name: "周边游",
                        amount: 100,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 3,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 5,
                        name: "度假出行",
                        amount: 100,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 3,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            },
                            {
                                key: 4,
                                name: "KTV",
                                amount: 100,
                            },
                            {
                                key: 5,
                                name: "足疗/按摩",
                                amount: 10,
                            },
                            {
                                key: 6,
                                name: "洗浴/汗蒸",
                                amount: 100,
                            }
                        ]
                    }
                ],
                // 休闲娱乐 list
                xiuxianChildrenList: [],
                // 商区
                shangquList: [
                    {
                        key: 1,
                        name: "全部",
                        amount: 100,
                        active: true,
                        children: []
                    },
                    {
                        key: 2,
                        name: "武侯区",
                        amount: 10,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100
                            },
                            {
                                key: 2,
                                name: "科华北路",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 3,
                        name: "武侯区",
                        amount: 10,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "全部",
                                amount: 100
                            },
                            {
                                key: 2,
                                name: "科华北路",
                                amount: 100,
                            }
                        ]
                    }
                ],
                // 商区children
                shangquChildrenList: [],
                // 商区 地铁 tag
                bizTabTag: "shangqu",
                // 地铁
                ditieList: [
                    {
                        key: 1,
                        name: "1号线",
                        amount: 100,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "科学城",
                                amount: 100
                            },
                            {
                                key: 2,
                                name: "新龙湖",
                                amount: 100,
                            },
                            {
                                key: 3,
                                name: "广州路",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "大坪",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "袁家岗",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 2,
                        name: "2号线",
                        amount: 100,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "科学城",
                                amount: 100
                            },
                            {
                                key: 2,
                                name: "新龙湖",
                                amount: 100,
                            },
                            {
                                key: 3,
                                name: "广州路",
                                amount: 100,
                            },
                            {
                                key: 2,
                                name: "大坪",
                                amount: 100,
                            }
                        ]
                    },
                    {
                        key: 3,
                        name: "3号线",
                        amount: 100,
                        active: false,
                        children: [
                            {
                                key: 1,
                                name: "科学城",
                                amount: 100
                            }
                        ]
                    }
                ],
                ditieChildrenList: [],
                // 排序
                sortlist: [
                    {
                        key: 1,
                        name: "默认排序",
                        active: true,
                    },
                    {
                        key: 2,
                        name: "离我最近",
                        active: false,
                    },
                    {
                        key: 3,
                        name: "评价最高",
                        active: false,
                    },
                    {
                        key: 4,
                        name: "最新发布",
                        active: false,
                    }
                ]
            }
        },
        mounted() {
            this.xiuxianList.find(dataItem => {
                if (dataItem.active) {
                    this.xiuxianChildrenList = dataItem.children;
                }
            })
        },
        methods: {
            /**
             * 切换tab
             * @param event
             */
            changeTab(event, tag) {
                if ($(event.currentTarget).hasClass('active')) {
                    this.clickTab = "";
                    $(".drop-header li").removeClass("active");
                } else {
                    this.clickTab = tag;
                    $(event.currentTarget).siblings("li").removeClass("active");
                    $(event.currentTarget).addClass("active");
                }
            }
            ,
            /**
             * 切换休闲左侧tab
             */
            changexiuxianList(item) {
                this.xiuxianList.find(dataItem => {
                    dataItem.active = false;
                    if (dataItem.key === item.key) {
                        this.xiuxianChildrenList = item.children;
                        item.active = true;
                    }
                })
            },
            /**
             * 切换商区
             */
            changeshangquList(item) {
                this.shangquList.find(dataItem => {
                    dataItem.active = false;
                    if (dataItem.key === item.key) {
                        item.active = true;
                    }
                })
                if (item.key !== 1) {
                    this.shangquChildrenList = item.children;
                    $(".biz .dropdown-right-list").show();
                    $(".biz .dropdown-list").css("width", "3.2rem")
                } else {
                    $(".biz .dropdown-right-list").hide();
                    $(".biz .dropdown-list").css("width", "100%")
                }
            },
            /**
             * 切换商区 地铁
             */
            changeBizTab(event, item) {
                if (item === 'shangqu') {
                    $(".biz .dropdown-right-list").hide();
                    $(".biz .dropdown-list").css("width", "100%")
                    this.shangquList.find(dataItem => {
                        dataItem.active = false;
                        if (dataItem.key === 1) {
                            dataItem.active = true;
                        }
                    })
                } else {
                    this.ditieList.find(dataItem => {
                        dataItem.active = false;
                    })
                    $(".ditie-dropdown-list").css("width", "100%")
                }
                this.bizTabTag = item;
                $(event.currentTarget).siblings("li").removeClass("active");
                $(event.currentTarget).addClass("active");
            },
            changeditieList(item) {
                this.ditieList.find(dataItem => {
                    dataItem.active = false;
                    if (dataItem.key === item.key) {
                        item.active = true;
                    }
                })
                this.ditieChildrenList = item.children;
                $(".ditie-dropdown-right-list").show();
                $(".ditie-dropdown-list").css("width", "3.2rem")
            },
            /**
             * 切换排序
             */
            changeSortList(item) {
                this.sortlist.find(dataItem => {
                    dataItem.active = false;
                    if (dataItem.key === item.key) {
                        item.active = true;
                    }
                });
                $(".drop-header li").removeClass("active");
                this.clickTab = "";
            },
            /**
             * 重置
             */
            reset() {
                $('input[type=checkbox]').prop('checked', false)
            },
            /**
             * 保存休闲
             */
            savexiuxian() {
                $(".drop-header li").removeClass("active");
                this.clickTab = "";
            },
            /**
             * 保存商区
             */
            saveshangqu() {
                $(".drop-header li").removeClass("active");
                this.clickTab = "";
            },
            /**
             * 保存地铁
             */
            saveditie() {
                $(".drop-header li").removeClass("active");
                this.clickTab = "";
            },
            /**
             * 保存筛选
             */
            saveSort() {
                $(".drop-header li").removeClass("active");
                this.clickTab = "";
            }

        }
    }
    ;
</script>

<style scoped>
    .shadow {
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .7);
        position: absolute;
        /*top: 0;*/
        left: 0;
        z-index: 10;
    }

    .nav-bread {
        padding: .3rem .2rem 0;
        margin-bottom: .3rem;
        color: #06c1ae;
        font-size: .24rem
    }

    .nav-bread h1 {
        color: #06c1ae;
        font-size: .24rem;
        font-weight: 400;
        display: inline
    }

    .navbar {
        height: 1.01rem;
        color: #fff;
        background: #06c1ae;
        border-bottom: 1px solid #21897d;
        display: -webkit-box;
        display: -ms-flexbox;
        position: relative
    }

    .navbar .nav-wrap-left {
        height: 1.01rem;
        line-height: 1.01rem
    }

    .navbar .nav-wrap-right {
        height: 100%
    }

    .navbar .box-search {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        border-radius: .06rem;
        background: rgba(0, 0, 0, .15);
        height: .64rem;
        line-height: .64rem;
        -webkit-box-sizing: border-box;
        position: relative;
        margin-top: .2rem
    }

    .navbar h1.nav-header, .navbar .h1.nav-header {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        font-size: .36rem;
        font-weight: 400;
        text-align: center;
        line-height: 1rem;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .navbar .icon-search {
        position: absolute;
        left: .2rem;
        font-size: .26rem;
        color: #fff
    }

    .navbar .box-search span {
        font-size: .26rem;
        color: #68dbce;
        padding-left: .6rem;
        box-sizing: border-box;
        width: 100%;
        display: block
    }

    .nav-wrap-left a.back {
        height: 1rem;
        width: .45rem;
        line-height: 1rem;
        padding: 0 .3rem
    }

    .navbar .nav-city {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        margin-right: .2rem;
        margin-left: .2rem;
        font-size: .32rem
    }

    .nav-wrap-right a {
        display: inline-block;
        height: 100%;
        line-height: 1rem;
        text-align: center;
        width: .94rem
    }

    .nav-wrap-right a:last-child {
        margin-right: .04rem
    }

    .nav-btn {
        display: inline-block;
        font-size: .2rem;
        line-height: 1;
        vertical-align: middle
    }

    .nav-btn .text-icon {
        display: block;
        margin: auto;
        margin-bottom: .12rem;
        font-size: .4rem
    }

    .navbar .nav-dropdown {
        position: absolute;
        right: .04rem;
        top: 1.06rem;
        width: 2rem;
        background: #06c1ae;
        opacity: .9;
        z-index: 100;
        height: 0;
        overflow: hidden;
        -webkit-transition: height .1s
    }

    .nav-dropdown.active {
        height: 2.5rem
    }

    .nav-dropdown li {
        height: .83rem;
        line-height: .83rem;
        border-bottom: 1px solid #21897d;
        text-align: center
    }

    .nav-dropdown .text-icon {
        font-size: .34rem
    }

    .nav-bar {
        position: relative;
        z-index: 30
    }

    .nav-bar .nav {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        background: #FFF;
        border-bottom: 1px solid #c6c0b3;
        text-align: center;
        height: .84rem;
        line-height: .84rem;
        -webkit-user-select: none
    }

    .dropdown-toggle {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        border-left: 1px solid #c6c0b3;
        width: 100%;
        text-align: left;
        text-align: center;
        color: #666;
        list-style: none;
    }

    .dropdown-toggle:first-child {
        border: 0
    }

    .dropdown-toggle.active {
        color: #06c1ae
    }

    .dropdown-toggle.caret:after {
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        border-top: .15rem solid #B7B7B7;
        border-left: .09rem solid transparent;
        border-right: .09rem solid transparent;
        border-bottom: 0;
        margin-left: .12rem
    }

    .dropdown-toggle.caret.active:after {
        border-top: 0;
        border-left: .09rem solid transparent;
        border-right: .09rem solid transparent;
        border-bottom: .15rem solid #06c1ae;
        margin-bottom: .04rem
    }

    .biz .sub-nav, .subway .sub-nav {
        display: block
    }

    .nav-head-name {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        max-width: 80%;
        vertical-align: middle;
        text-overflow: ellipsis
    }

    .sub-nav {
        background: #FEFEFE;
        height: .8rem;
        line-height: .8rem;
        border-bottom: 1px solid #c6c0b3;
        display: none;
        text-align: center
    }

    /*下拉*/
    .dropdown-module {
        position: absolute;
        width: 100%;
        overflow: hidden;
        -webkit-transition: height .3s;
    }

    .dropdown-left-module {
        width: 3.2rem;
        height: 100%;
        float: left;
        /*background-color: #f6f4f0;*/
    }

    .dropdown-left-module .dropdown-list {
        width: 100%;
        background-color: #fff;
    }

    .dropdown-left-module .dropdown-list li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
    }

    .dropdown-left-module .dropdown-list li span {
        float: left;
        text-align: left;
        margin: 0;
        margin-left: .4rem;
    }

    .dropdown-left-module .dropdown-list li .quantity {
        display: inline-block;
        text-align: right;
        margin-right: .16rem;
        font-size: .22rem;
        position: absolute;
        right: 0;
        top: .3rem;
    }

    .dropdown-left-module .dropdown-list .quantity > b {
        font-weight: 400;
        background: #CCC;
        border-radius: .8rem;
        padding: 0 .14rem;
        color: #FFF;
        line-height: .28rem;
        font-size: .24rem;
        height: .28rem;
        float: right;
    }

    .dropdown-left-module .dropdown-list li.active {
        background-color: #f6f4f0;
    }

    .dropdown-right-module {
        /*position: absolute;*/
        top: 0;
        right: 0;
        overflow: hidden;
        left: 3.2rem;
        bottom: 0;
        border-left: 1px solid #ddd8cd;
        background: #f6f4f0;
    }

    .dropdown-right-module .dropdown-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
    }

    .dropdown-right-module .sub-name {
        display: block;
        margin-right: .6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dropdown-right-module .sub-quantity {
        color: #B4B4B4;
        position: absolute;
        margin-right: .16rem;
        right: 0;
        top: 0;
    }

    .dropdown-right-module .dropdown-list span {
        text-align: left;
        margin-left: .4rem;
    }

    /*全城*/
    .biz .sub-nav,
    .subway .sub-nav {
        display: block;
    }

    .biz ul.tab {
        display: inline-block;
        height: .6rem;
        line-height: .6rem;
        border-radius: .04rem;
        border: 1px solid #666;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .biz .tab li {
        display: inline-block;
        text-align: center;
        width: 2.4rem;
        border-right: 1px solid #666;
    }

    .biz .tab li:last-child {
        border: 0;
    }

    .biz .tab li.active {
        background: #666;
        color: #fff;
    }

    .biz .dropdown-list {
        width: 100%;
        background: #FFF;
        float: left;
    }

    .biz .dropdown-list > li.active {
        background: #f6f4f0;
    }

    .biz .dropdown-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
    }

    .biz .dropdown-list span:nth-child(1) {
        float: left;
        text-align: left;
        margin: 0;
        margin-left: .4rem;
    }

    .biz .dropdown-list .quantity {
        display: inline-block;
        text-align: right;
        margin-right: .16rem;
        font-size: .22rem;
        position: absolute;
        right: 0;
        top: .3rem;
    }

    .biz .dropdown-list .quantity > b {
        font-weight: 400;
        background: #CCC;
        border-radius: .8rem;
        padding: 0 .14rem;
        color: #FFF;
        line-height: .28rem;
        font-size: .24rem;
        height: .28rem;
        float: right;
    }

    .ditie-dropdown-list {
        width: 100%;
        background: #FFF;
        float: left;
    }


    .ditie-dropdown-list > li.active {
        background: #f6f4f0;
    }

    .ditie-dropdown-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
    }

    .ditie-dropdown-list span:nth-child(1) {
        float: left;
        text-align: left;
        margin: 0;
        margin-left: .4rem;
    }

    .ditie-dropdown-list .quantity {
        display: inline-block;
        text-align: right;
        margin-right: .16rem;
        font-size: .22rem;
        position: absolute;
        right: 0;
        top: .3rem;
    }

    .ditie-dropdown-list .quantity > b {
        font-weight: 400;
        background: #CCC;
        border-radius: .8rem;
        padding: 0 .14rem;
        color: #FFF;
        line-height: .28rem;
        font-size: .24rem;
        height: .28rem;
        float: right;
    }

    .ditie-dropdown-right-list {
        /*position: absolute;*/
        display: none;
        top: 0;
        right: 0;
        overflow: hidden;
        left: 3.2rem;
        bottom: 0;
        border-left: 1px solid #ddd8cd;
        background: #f6f4f0;
        width: calc(100vw - 3.22rem) !important;
        float: left;
    }

    .ditie-dropdown-right-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
        list-style: none;
    }

    .ditie-dropdown-right-list .sub-name {
        display: block;
        margin-right: .6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
    }

    .ditie-dropdown-right-list .sub-quantity {
        color: #B4B4B4;
        position: absolute;
        margin-right: .16rem;
        right: 0;
        top: 0;
    }

    .ditie-dropdown-right-list span {
        text-align: left;
        margin-left: .4rem;
    }


    .biz .dropdown-right-list {
        /*position: absolute;*/
        display: none;
        top: 0;
        right: 0;
        overflow: hidden;
        left: 3.2rem;
        bottom: 0;
        border-left: 1px solid #ddd8cd;
        background: #f6f4f0;
        width: calc(100vw - 3.22rem) !important;
        float: left;
    }

    .biz .dropdown-right-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
        list-style: none;
    }

    .biz .dropdown-right-list .sub-name {
        display: block;
        margin-right: .6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
    }

    .biz .dropdown-right-list .sub-quantity {
        color: #B4B4B4;
        position: absolute;
        margin-right: .16rem;
        right: 0;
        top: 0;
    }

    .biz .dropdown-right-list span {
        text-align: left;
        margin-left: .4rem;
    }

    /*排序*/
    .sort .dropdown-list {
        width: 100%;
        background: #FFF;
    }

    .sort .dropdown-list > li {
        -webkit-transform: translate3d(0, 0, 0);
        border-bottom: 1px solid #ddd8cd;
        line-height: .87rem;
        height: .87rem;
        position: relative;
    }

    .sort .dropdown-list span {
        float: left;
        text-align: left;
        margin: 0;
        margin-left: .4rem;
        font-weight: 400;
    }

    .sort .dropdown-list li.active {
        color: #06c1ae;
    }

    .sort .dropdown-list > li.active {
        background: #f6f4f0;
    }

    /*排序*/
    .csp-wrapper {
        display: block;
    }

    .csp-wrapper dl.list:first-child {
        margin: 0;
        border-top: 0;
    }

    .csp-wrapper dl.list {
        border-top: 1px solid #DDD8CE;
        border-bottom: 1px solid #DDD8CE;
        margin-top: .2rem;
        margin-bottom: 0;
        background-color: #fff;
    }

    .csp-wrapper dl.list dt, .csp-wrapper dl.list dd {
        margin: 0;
        border-bottom: 1px solid #DDD8CE;
        overflow: hidden;
        font-size: inherit;
        font-weight: 400;
        position: relative;
        display: block;
        /*margin-inline-start: 40px;*/
    }

    .csp-wrapper dl.list .dd-padding, .csp-wrapper dl.list dt, dl.list dd > .react {
        padding: .28rem .2rem;
    }

    .csp-wrapper a.react, .csp-wrapper label.react {
        display: block;
        color: inherit;
        height: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .csp-wrapper .kv-line-r {
        margin: 0;
    }

    .kv-line-r {
        display: -webkit-box;
        display: -ms-flexbox;
        margin: .2rem 0;
    }

    .kv-line-r > h6, .kv-line-r > .kv-k {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        font-size: inherit;
        font-weight: 400;
        margin-right: .2rem;
        display: block;
    }

    .csp-wrapper p, .csp-wrapper h6 {
        line-height: 1.41;
        text-align: justify;
        margin: -.2em 0;
        word-break: break-all;
    }

    .csp-wrapper .kv-line-r > .kv-v, .csp-wrapper .kv-line-r > p {
        display: block;
    }

    .csp-wrapper p, .csp-wrapper h6 {
        line-height: 1.41;
        text-align: justify;
        margin: -.2em 0;
        word-break: break-all;
    }

    input.mt[type=checkbox] {
        border-radius: .06rem;
    }

    input.mt[type=radio], input.mt[type=checkbox] {
        -webkit-appearance: none;
        width: .45rem;
        height: .45rem;
        margin: -.07rem 0;
        border-radius: .06rem;
        border: .02rem solid #DDD8CE;
        text-align: center;
        vertical-align: middle;
        line-height: .45rem;
        outline: 0;
    }

    input.mt[type=radio]:checked, input.mt[type=checkbox]:checked {
        background-color: #06c1ae;
        border: 0;
        color: #fff;
    }

    input.mt[type=radio]:checked:after, input.mt[type=checkbox]:checked:after {
        content: "✓";
        font-size: .4rem;
    }

    .csp-wrapper .footer {
        background-color: #f6f4f0;
        height: 40px;
    }

    .csp-wrapper .footer .btn-large.btn-link {
        font-size: .3rem;
    }

    .csp-wrapper .footer .btn-link {
        padding: 0 .3rem;
        background: 0;
        color: #06c1ae;
    }

    .csp-wrapper .footer .btn-large {
        height: .8rem;
        line-height: .8rem;
        font-size: .4rem;
    }

    .btn-reset {
        float: left;
    }

    .btn-save {
        float: right;
    }


    /*.csp-wrapper .footer .btn {*/
    /*    display: inline-block;*/
    /*    margin: 0;*/
    /*    text-align: center;*/
    /*    height: .6rem;*/
    /*    padding: 0 .32rem;*/
    /*    border-radius: .06rem;*/
    /*    color: #fff;*/
    /*    border: 0;*/
    /*    background-color: #06c1ae;*/
    /*    font-size: .28rem;*/
    /*    vertical-align: middle;*/
    /*    line-height: .6rem;*/
    /*    box-sizing: border-box;*/
    /*    cursor: pointer;*/
    /*    -webkit-user-select: none;*/
    /*}*/
</style>
